<template>
  <div id="callme" :style="{ marginTop}">
	<div class="container-fluid bigImg">
		<div class="row">
			<img src="/static/img/contact.png">
		</div>
	</div>
	<div class="container main">
		<div class="row lianxi">
			<div class="col-md-6 position-phone">
				<dl class="position">
					<dt><img src="/static/img/location.png"></dt>
					<dd>四川省成都市高新区天府二街东方希望天祥广场B座</dd>
				</dl>
				<dl class="position">
					<dt><img src="/static/img/phone.png"></dt>
					<dd>李先生： 123 4567 8901</dd>
				</dl>
			</div>
			<div class="col-md-4 tell-email">
				<dl class="position">
					<dt><img src="/static/img/mobile.png"></dt>
					<dd>电话： 131 9876 5432</dd>
				</dl>
				<dl class="position">
					<dt><img src="/static/img/mail.png"></dt>
					<dd>email： 502763576@qq.com</dd>
				</dl>
			</div>
			<div class="col-md-2 erweima">
				<div class="code-box">
					<div class="code"><img src="/static/img/qrcode.jpg"></div>
					<dl class="guanzhu">
						<dt><img src="/static/img/phone.png"></dt>
						<dd>扫一扫关注<br/>微信公众号</dd>
					</dl>
				</div>
			</div>
		</div>
		<div class="row map">
			<div class="map-box col-md-12">
				
			</div>
		</div>
	</div>
  </div>
</template>

<script>
	export default {
		name: "Callme",
		data () {
			return {
				marginTop: "initial"
			}
		},
		mounted () {
			this.marginTop = this.$router.headerH;
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
	#callme{
		// margin-top: 50px;
		padding-bottom: 65px;
	}
	.bigImg{
		.row{
			img{
				width: 100%;
			}
		}
	}
	.main{
		margin-top: 70px;
		.lianxi{
			font-size: 16px;
			&>div{
				&>dl{
					display: flex;
					align-items: center;
					margin-bottom: 30px;
					dt{
						width: 78px;
						height: 78px;
						border: 1px solid #e2e2e2;
						border-radius: 50%;
						line-height: 78px;
						margin-right: 20px;
					}
					dd{
						text-align: left;
					}
				}
			}
			.erweima{
				.code-box{
					.code{
						display: inline-block;
						width: 146px;
						height: 146px;
						img{
							width: 100%;
						}
					}
					.guanzhu{
						display: flex;
						justify-content: center;
						dt{
							margin-right: 12px;
						}
					}
				}
			}
		}
		.map{
			margin-top: 40px;
			.map-box{
				height: 502px;
				background: pink;
			}
		}
	}
</style>
